<template>
  <content-box :title="title" :tips="tips" style="height: 304px" has-bor :loading="loading">
    <template slot="left">
      <div class="font-size-14">
        车间设备总数：{{ countMap.total }}
        <span style="padding-left: 30px">设备联网总数：{{ countMap.networking }}</span>
      </div>
    </template>
    <div style="height: 227px">
      <div class="flex chart-box full-width margin-t-20">
        <div class="chart" ref="normalStatus" id="normalStatus" style="height: 207px;max-width: calc((100% - 2px) /3)"/>
        <div class="bor"/>
        <div class="chart" ref="alarmStatus" id="alarmStatus" style="height: 207px;max-width: calc((100% - 2px) /3)"/>
        <div class="bor"/>
        <div class="chart padding-t-20 padding-b-20" style="height: 207px;max-width: calc((100% - 2px) /3)">
          <div class="full-width full-height flex justify-between items-center column" style="height: 207px">
            <progress-box v-for="(item, index) in manageStatusClone" :key="index" :data="item" :total="total" hasPercent/>
          </div>
        </div>
      </div>
    </div>
  </content-box>
</template>

<script>
import contentBox from './content-box'
import echarts from 'echarts'
import chart from './chart-option'
import progressBox from './progress'
import _ from 'lodash'
import { addListener } from 'resize-detector'
import { mapGetters } from 'vuex'
export default {
  name: 'workshop-real-time',
  components: {
    contentBox,
    progressBox
  },
  props: {
    countMap: Object,
    hasCraft: Boolean,
    hasWork: Boolean
  },
  computed: {
    ...mapGetters(['statusList']),
    tips () {
      return `所选车间内安装语祯盒子的机床在当前时刻各状态的台数占比。${this.statusList[4].label}、故障、换线、维修可以和其他状态同时出现。`
    }
  },
  mounted () {
    addListener(this.$refs.normalStatus, this.$utils.debounce(() => {
      if (this.$route.name !== 'statusOverview') {
        return
      }
      if (this.normalStatus === null) {
        this.normalStatus = echarts.init(this.$refs.normalStatus)
      } else {
        this.normalStatus.resize()
        this.getNormalStatus()
      }
      if (this.alarmStatus === null) {
        this.alarmStatus = echarts.init(this.$refs.getAlarmStatus)
      } else {
        this.alarmStatus.resize()
        this.getAlarmStatus()
      }
    }, 100))
  },
  data () {
    return {
      title: '车间实时状态',
      loading: false,
      data: {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alert: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      },
      normalStatus: null,
      alarmStatus: null,
      status: this.Enums.MACHINES_STATUS,
      total: 0,
      manageStatusClone: [],
      manageStatus: [{
        label: '换线数量',
        color: 'linear-gradient(90deg, #AC70F2, #AC70F2)',
        count: 0,
        value: 'normalDeviceCount'
      }, {
        label: '故障数量',
        color: 'linear-gradient(90deg, #F7B82D, #F7B82D)',
        count: 0,
        value: 'slightSlowDeviceCount'
      }, {
        label: '维修数量',
        color: 'linear-gradient(90deg, #1DC4F6, #1DC4F6)',
        count: 0,
        value: 'severeDeviceCount'
      }]
    }
  },
  methods: {
    showLoading () {
      this.loading = true
    },
    getInfo (val) {
      if (this.$route.name !== 'statusOverview') {
        return
      }
      this.data = val
      this.total = val.process + val.stop + val.breaks + val.offLine
      this.manageStatus[0].count = val.changeLine
      this.manageStatus[1].count = val.fault
      this.manageStatus[2].count = val.repair
      const member = _.cloneDeep(this.manageStatus)
      if (!this.hasCraft && this.hasWork) {
        member.splice(0, 1)
      } else if (!this.hasWork && this.hasCraft) {
        member.splice(1, 2)
      } else if (!this.hasCraft && !this.hasWork) {
        member.splice(0, 3)
      }
      this.manageStatusClone = member
      this.$nextTick(() => {
        if (this.normalStatus === null) {
          this.normalStatus = echarts.init(this.$refs.normalStatus)
        }
        if (this.alarmStatus === null) {
          this.alarmStatus = echarts.init(this.$refs.alarmStatus)
        }
        this.loading = false
        this.getNormalStatus()
        this.getAlarmStatus()
      })
    },
    getNormalStatus (total = this.total) {
      const color = [this.statusList[0].color, this.statusList[1].color, this.statusList[2].color, this.statusList[3].color]
      const seriesData = [
        { name: this.statusList[0].label, value: this.data.process },
        { name: this.statusList[1].label, value: this.data.stop },
        { name: this.statusList[2].label, value: this.data.breaks },
        { name: this.statusList[3].label, value: this.data.offLine }
      ]

      const legend = _.map(seriesData, 'name')
      this.$nextTick(() => {
        const option = chart.getPieOption(color, legend, seriesData, document.getElementById('normalStatus'), total)
        this.normalStatus.setOption(option)
      })
    },
    getAlarmStatus (total = this.total) {
      const color = [this.statusList[4].color, '#e8e8e8']
      const seriesData = [
        { name: this.statusList[4].label, value: this.data.alert },
        { name: 'bg', value: total - this.data.alert }]
      const legend = [this.statusList[4].label]
      this.$nextTick(() => {
        const option = chart.getPieOption(color, legend, seriesData, document.getElementById('alarmStatus'), total)
        this.alarmStatus.setOption(option)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .chart-box{
    height calc(100% - 20px)
    .bor{
      margin 40px 25px
      width 1px
      background-color #D3D3D3
      height calc(100% - 80px)
    }
    .chart{
      width calc((100% - 102px) / 3)
    }
  }
</style>
